import { Typography, List, Checkbox } from 'antd'
import useGetCategoriers from '../../helpers/getCategory'
const { Title } = Typography

function FilterByCategory({handleFilters}) {
  const catagories = useGetCategoriers()
  const onChange = checkedValue => {
    handleFilters(checkedValue)
  }
  return (
    <>
      <Title level={5}>按照分类进行筛选</Title>
      <Checkbox.Group onChange={onChange}>
        <List
          dataSource={catagories}
          renderItem={item => (
            <List.Item>
              <Checkbox value={item._id}>{item.name}</Checkbox>
            </List.Item>
          )}
        />
      </Checkbox.Group>

    </>
  )
}

export default FilterByCategory